// 混淆 -- 背景虚线 ([horizontal vertical] 竖向 横向 | size 虚线长度 | color 颜色)
@mixin dashed-line($layout: 'horizontal', $size: 8px, $color: #DDDDDD) {
  // 竖向
  @if $layout=='horizontal' {
    background-image: linear-gradient(to bottom, $color 0%, $color 50%, transparent 50%);
    background-size: 1px $size;
    background-repeat: repeat-y;
  } @else {
    background-image: linear-gradient(to right, $color 0%, $color 50%, transparent 50%);
    background-size: $size 1px;
    background-repeat: repeat-x;
  }
}

// 使用
.box {
  width: 300px;
  height: 300px;
  margin: 30px auto;
  background-color: #fafafa;
  @include dashed-line('vertical', 10px, #000);

  &.horizontal {
    @include dashed-line('horizontal', 10px, #000);
  }
}